<template>
    <div>
        <!-- 搜索 -->
        <el-input placeholder="请输入内容" v-model="query" class="input-with-select" style='width:300px'>
            <el-button slot="append" icon="el-icon-search" @click='searchGoods'></el-button>
        </el-input>
        <!-- 添加分类 -->
        <el-button type="success" plain @click='$router.push({path:"add"})'>添加分类</el-button>
        <!-- 商品表单 -->
        <el-table :data="goodslist" border style="width: 100%">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称" width="380">
            </el-table-column>
            <el-table-column prop="goods_price" label="商品价格(元)" width="120">
            </el-table-column>
            <el-table-column prop="goods_weight" label="商品重量" width="120">
            </el-table-column>
            <el-table-column prop="add_time"  label="创建时间" width="120">
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top">
                        <el-button type="primary" icon="el-icon-edit" @click="editcategorieslist(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" @click='deletecategories(scope.row.id)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 25]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { GetgoodsList } from '@/api/index.js'
export default {
  data () {
    return {
      goodslist: [],
      query: '',
      pagesize: 5,
      currentPage: 1,
      //   总页数
      total: 0
    }
  },
  methods: {
    //   获取商品分页
    getGoodspage () {
      // 获取商品列表
      GetgoodsList({ query: this.query, pagenum: this.currentPage, pagesize: this.pagesize }).then(res => {
        // console.log(res)
        this.goodslist = res.data.goods
        //   赋值总页数
        this.total = res.data.total
      })
    },
    //   分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      //   调用分页函数
      this.getGoodspage()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      //   调用分页函数
      this.getGoodspage()
    },
    //   编辑商品信息
    editcategorieslist () {},
    // 删除商品信息
    deletecategories () {},
    // 搜索
    searchGoods () {
      if (this.query === '') {
        return false
      }
      this.currentPage = 1
      this.getGoodspage()
    }
  },
  mounted () {
    // 获取商品列表
    GetgoodsList({ query: '', pagenum: 1, pagesize: 5 }).then(res => {
    //   console.log(res)
      this.goodslist = res.data.goods
      //   赋值总页数
      this.total = res.data.total
    //   this.filter()
    })
  }
}
</script>

<style>
</style>
